<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淡入动画</title>
</head>
<body>
    <div class="container">
        <span>h</span>
        <span>a</span>
        <span>p</span>
        <span>p</span>
        <span>y</span>
        <span>&nbsp;</span>
        <span>h</span>
        <span>o</span>
        <span>l</span>
        <span>i</span>
        <span>d</span>
        <span>a</span>
        <span>y</span>
    </div>
</body>
    <style>
        body{
            margin: 0;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(pink,white,pink);
        }
        .container span{
            display: inline-block;
            color: purple;
            font-weight: bold;
            text-transform: uppercase;
            font-size: 40px;
            animation:sideSlide 4s forwards infinite;
            -webkit-transform: translateX(-100vw) scale(0);
            -moz-transform: translateX(-100vw) scale(0);
            -ms-transform: translateX(-100vw) scale(0);
            -o-transform: translateX(-100vw) scale(0);
            transform: translateX(-100vw) scale(0);
            filter: opacity(0);
            animation-delay: calc((var(--n) - 1) * 0.05s);
        }
        @keyframes sideSlide {
            15%,20%{
                transform: translateX(0.5em) scale(1);
                color: purple;
            }
            24%{
                transform: translateX(0) scale(1.2);
                color: cyan;
            }
            25%,75%{
                transform: translateX(0) scale(1);
                filter: opacity(1);
                color: purple;
            }
            90%,100%{
                transform: translateX(100vw) scale(0);
                filter: opacity(0);
            }
        }
        .container span:nth-child(1) { --n: 1; }
        .container span:nth-child(2) { --n: 2; }
        .container span:nth-child(3) { --n: 3; }
        .container span:nth-child(4) { --n: 4; }
        .container span:nth-child(5) { --n: 5; }
        .container span:nth-child(6) { --n: 6; }
        .container span:nth-child(7) { --n: 7; }
        .container span:nth-child(8) { --n: 8; }
        .container span:nth-child(9) { --n: 9; }
        .container span:nth-child(10) { --n: 10; }
        .container span:nth-child(11) { --n: 11; }
        .container span:nth-child(12) { --n: 12; }
        .container span:nth-child(13) { --n: 13; }
        .container span:nth-child(14) { --n: 14; }
    </style>
</html>